<template>
  <div>
    <el-cascader
      v-model="cityValue"
      :options="options"
      :disabled="disabled"
      :show-all-levels="showAllLevels"
      size="small"
      :props="props"
      placeholder="请选择国家或者地区"
      @change="change"
      @expand-change="expandChange"
      @blur="blur"
      @focus="focus"
      @visible-change="visibleChange"
      @remove-tag="removeTag"
    ></el-cascader>
  </div>
</template>

<script>
  import City from "./js/index";

  //定义固定使用类型
  const global = "global";//国内加国外
  const area = "area";//国内包含地区
  const china = "china";//国内省市

  /*兼容其他数据源不一致的数据*/
  //过滤省正则
  const filterProvince = /省|壮族|回族|维吾尔|特别行政区|自治区/g;
  //过滤市区正则
  const filterCity = /市|地区|朝鲜族自治州|哈尼族自治县|彝族自治州|哈尼族彝族自治州|壮族苗族自治州|傣族自治州|白族自治州|傣族景颇族自治州|藏族自治州|傈僳族自治州|回族自治州|藏族自治州|蒙古族藏族自治州|蒙古自治州|哈萨克自治州|藏族羌族自治州|苗族侗族自治州|依族苗族自治州|土家族苗族自治州/g;

  export default {
    //调用change函数时会改变value
    model: {
      prop: "value",
      event: "change",
    },
    props: {
      value: {
        type: Array,
        default: () => [],
      },
      props: {
        type: Object,
        default: () => {},
      },
      disabled: {
        type: Boolean,
        default: false,
      },
      showAllLevels: {
        type: Boolean,
        default: true,
      },
      filterable: {
        type: Boolean,
        default: false,
      },
      //默认国内外
      dataType: {
        type: String,
        default: "global",
      },
    },
    data() {
      return {
        cityValue: [],
        options: [],
      };
    },
    watch: {
      value: {
        handler: function (val) {
          let city = val.map((e, i) => {
            if (i == 2) {
              if(e.indexOf('香港')!=-1){
                e='中国香港'
              }
              if(e.indexOf('澳门')!=-1){
                e='中国澳门'
              }
            }
            e = e.replace(filterCity, "");
            e = e.replace(filterProvince, "");
            return e;
          });
          this.cityValue = city;
        },
        //深度监听
        deep: true,
        //初始化时监听
        immediate: true,
      },
    },
    mounted() {
      //判断类型
      switch (this.dataType) {
        case global:
          this.options = City.cityOption;
          break;
        case area:
          this.options = City.areaOption;
          break;
        case china:
          this.options = City.domesticOption;
          break;
      }
    },
    methods: {
      change(val) {
        this.$emit("change", val);
      },
      expandChange(val) {
        this.$emit("expand-change", val);
      },
      blur(val) {
        this.$emit("blur", val);
      },
      focus(val) {
        this.$emit("focus", val);
      },
      visibleChange(val) {
        this.$emit("visible-change", val);
      },
      removeTag(val) {
        this.$emit("remove-tag", val);
      },
    },
  };
</script>

<style>
</style>
